import { ProgressElementInterface } from './ProgressElementInterface';

/**
 * SpanProgress组件配置选项接口
 * 用于定义SpanProgress组件的初始化参数
 */
export interface SpanProgressOptions {
  /**
   * 进度条显示的文本内容
   * @default ''
   */
  text?: string;

  /**
   * 进度文本模板，支持{text}、{progress}和自定义占位符
   * {text} - 替换为text属性的值
   * {progress} - 替换为当前进度百分比
   * 其他{key}形式的占位符将从params参数中获取对应的值
   * @default '{progress}'
   */
  textTemplate?: string;
}

/**
 * Span类型进度条组件
 * 实现ProgressElementInterface接口，提供基于span元素的进度条功能
 * 特点：轻量级内联进度显示，支持文本模板和渐变色背景
 * @example
 * ```typescript
 * const progress = new SpanProgress({
 *   text: '下载中',
 *   textTemplate: '{text} - {progress}% ({processedBytes}/{totalBytes})'
 * });
 * container.appendChild(progress.getElement());
 * progress.updateState(35, {processedBytes: '10MB', totalBytes: '100MB'}); // 更新为35%进度
 * ```
 */
export class SpanProgress implements ProgressElementInterface {
  /**
   * 进度条DOM元素
   * 内部维护的span元素，用于渲染进度条
   */
  private __element: HTMLSpanElement;

  /**
   * 进度条显示文本
   * 从配置选项中获取，可通过textTemplate控制显示位置
   */
  private __text: string;

  /**
   * 进度文本模板字符串
   * 支持{text}、{progress}和自定义占位符
   * @default '{progress}'
   */
  private __textTemplate: string = '{progress}';

  /**
   * 更新文本内容，处理模板替换
   * @param progress 当前进度百分比
   * @param params 可选的自定义参数对象，用于模板变量替换
   * @private
   */
  private __updateTextContent(progress: number, params?: Record<string, any>): void {
    let text = this.__textTemplate
      .replace(/{text}/g, this.__text)
      .replace(/{progress}/g, progress.toString());

    // 处理自定义参数占位符
    if (params) {
      Object.entries(params).forEach(([key, value]) => {
        const placeholder = `{${key}}`;
        text = text.replace(new RegExp(placeholder, 'g'), String(value));
      });
    }

    this.__element.textContent = text;
  }

  /**
   * SpanProgress构造函数
   * 初始化进度条元素并应用配置选项
   * @param {SpanProgressOptions} [options] - 进度条配置选项
   * @param {string} [options.text] - 显示文本内容
   * @param {string} [options.textTemplate] - 文本模板，支持{text}、{progress}和自定义占位符
   * @example
   * // 创建带文本模板的进度条
   * new SpanProgress({
   *   text: '文件下载',
   *   textTemplate: '{text}: {progress}% ({processedBytes}/{totalBytes})'
   * });
   */
  constructor(options?: SpanProgressOptions) {
    this.__element = this.createElement();
    // 应用文本模板配置，默认使用'{progress}'
    this.__textTemplate = options?.textTemplate || this.__textTemplate;
    // 应用显示文本，默认为空字符串
    this.__text = options?.text || '';
  }

  /**
   * 创建span进度条元素
   * @returns HTMLSpanElement 进度条元素
   */
  createElement(): HTMLSpanElement {
    const span = document.createElement('span');

    // 设置基础样式
    span.style.cssText = `
      display: inline-block;
      cursor: pointer;
      background: linear-gradient(to right, var(--progress-color) var(--progress), transparent var(--progress));
      transition: background 0.3s ease;
      position: relative;
      overflow: visible;
      color: var(--progress-text-color);
      -webkit-user-select: none;
      user-select: none;
    `;

    // 使用CSS变量存储进度值
    span.style.setProperty('--progress', '0%');
    span.style.setProperty('--progress-color', '#a0cfff');
    span.style.setProperty('--progress-text-color', '#337ecc');

    return span;
  }

  /**
   * 更新进度条中间状态
   * @param progress 当前进度百分比 (0-100)
   * @param params 可选的自定义参数对象，用于模板变量替换
   */
  updateState(progress: number, params?: Record<string, any>): void {
    const progressValue = Math.min(Math.max(progress, 0), 100);
    this.__element.style.setProperty('--progress', `${progressValue}%`);

    if (progressValue < 100) {
      this.__element.style.setProperty('--progress-color', '#a0cfff');
      this.__element.style.setProperty('--progress-text-color', '#337ecc');
    } else {
      this.__element.style.setProperty('--progress-color', '#67C23A');
      this.__element.style.setProperty('--progress-text-color', 'white');
    }

    this.__updateTextContent(progressValue, params);
  }

  /**
   * 获取进度条元素
   * @returns HTMLSpanElement 进度条元素
   */
  getElement(): HTMLSpanElement {
    return this.__element;
  }
}